<template>
  <div class="padding_10">
    <!-- 搜索条件输入，选择框 -->
    <div class="grid_4_column">
      <div>
        商品名称：
        <el-input
          v-model="goodsName"
          clearable
          maxlength="50"
          placeholder="输入商品名称"
          style="width: 200px"
          type="text"
        />
      </div>
    </div>
    <!-- 筛选，重置按钮 -->
    <div style="margin: 10px 0">
      <el-button
        :loading="filterLoad"
        type="primary"
        @click="getRemindList('filterLoad')"
      >
        筛选
      </el-button>
      <el-button :loading="resetLoad" @click="reset">重置</el-button>
    </div>
    <!-- 表格标签页 -->
    <el-tabs v-model="goodsStatus" type="card" @tab-click="getRemindList">
      <el-tab-pane label="全部" name="" />
      <el-tab-pane label="等待" name="wait" />
      <el-tab-pane label="成功" name="success" />
      <el-tab-pane label="已取消" name="cancel" />
    </el-tabs>
    <!-- 提醒展示列表 -->
    <el-table :data="tableData" :empty-text="emptyText">
      <el-table-column label="商品名称" prop="goods_name" />
      <el-table-column label="客户名称" prop="customer_name" />
      <el-table-column label="提醒状态" prop="status_name" />
      <el-table-column
        label="提醒内容"
        prop="remind_fields"
        show-overflow-tooltip
      />
      <el-table-column label="操作备注" prop="remark" />
      <el-table-column label="应提醒日期" prop="remind_date" />
      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <div v-show="scope.row.status != 'cancel'">
            <el-button
              type="primary"
              @click="openRemindSet(scope.row, 'success')"
            >
              成功
            </el-button>
            <el-button type="danger" @click="openRemindSet(scope.row, 'fail')">
              失败
            </el-button>
            <el-button type="info" @click="close(scope.row)">
              永久关闭
            </el-button>
          </div>
          <el-tag v-show="scope.row.status == 'cancel'" type="primary">
            该提醒已关闭
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex_between">
      <div></div>
      <el-pagination
        :current-page.sync="page"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="getRemindList"
      />
    </div>

    <!-- 提醒设置对话框 -->
    <el-dialog title=" " :visible.sync="remindDialog">
      <div class="flex_center">
        <!-- 提醒备注 -->
        <div style="display: flex">
          <div class="inp_title">
            <span>*</span>
            提醒备注：
          </div>
          <el-input
            v-model="remindForm.remark"
            autosize
            maxlength="100"
            placeholder="请输入提醒备注"
            show-word-limit
            style="width: 300px"
            type="textarea"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="setRemindSetting">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { remindList, remindSetting } from '@/api/remind'

  export default {
    data() {
      return {
        page: 1,
        total: 10,
        emptyText: ' ',
        goodsName: '', // 列表搜索条件，商品名称
        goodsStatus: '', // 获取提醒列表的类型筛选条件
        filterLoad: false, // 控制筛选按钮加载样式显示隐藏
        resetLoad: false, // 控制重置按钮加载样式显示隐藏
        tableData: [],

        remindDialog: false, // 提醒设置dialog
        remindForm: {
          id: '', // ID
          status: '', // fail success cancel
          remark: '', // 提醒备注
        },
      }
    },
    watch: {
      // 当对话框关闭清空提醒表单数据
      remindDialog(newValue) {
        if (!newValue) {
          for (let item in this.remindForm) {
            this.remindForm[item] = ''
          }
        }
      },
    },
    mounted() {
      this.getRemindList()
    },
    methods: {
      // 获取提醒列表
      getRemindList(btnLoad) {
        this[btnLoad] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const params = {
          pagesize: this.page,
          goods_name: this.goodsName,
          status: this.goodsStatus,
        }
        remindList(params).then((res) => {
          this.tableData = res.data.data
          this.total = res.data.last_page * 10
          this[btnLoad] = false
          loading.close()
          this.emptyText = '暂无数据'
        })
      },
      // 重置筛选
      reset() {
        this.goodsName = ''
        this.getRemindList('resetLoad')
      },
      // 打开提醒设置对话框，设置当前选中提醒id
      openRemindSet(row, status) {
        this.remindForm.id = row.id
        this.remindForm.status = status
        this.remindDialog = true
      },
      // 修改提醒状态
      setRemindSetting() {
        remindSetting(this.remindForm).then(() => {
          this.remindDialog = false
          this.getRemindList()
        })
      },
      // 永久关闭
      close(row) {
        this.$confirm(
          `是否永久关闭 “${row.customer_name}” 客户的消息提醒?`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            this.remindForm.id = row.id
            this.remindForm.status = 'cancel'
            this.setRemindSetting()
          })
          .catch(() => {})
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }
  .flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .inp_title {
    width: 100px;
    text-align: center;
    position: relative;
    top: 7px;
  }
</style>
